<template>
    <div class="common-layout">
        <!--            头部--><home-head></home-head>
        <!--   @click="data.activeIndex = 0"-->
        <!--            主体-->
        <div  class="footer-class">
            <div class="button-group-container1">
                <div v-for="(item, index) in data.navList"
                     :key="index"
                     class="footer-class">
                </div>
                <div class="footer-class" >
                    <div v-if="bookId !== null&& route.name === 'bookList'">
                        <ListSubassembly  :bookId="bookId"></ListSubassembly>
                    </div>
                </div>
            </div>
        </div>
        <home-bottom></home-bottom>
    </div>
</template>

<script setup>
import HomeBottom from "@/components/home/home-bottom.vue";
import { reactive,onMounted,ref} from 'vue'
import {useRoute, useRouter} from "vue-router";
import ListSubassembly from "@/components/list/list-subassembly.vue";
import HomeHead from "@/components/home/home-head.vue";
const router = useRouter()
const route = useRoute();
const bookId = ref(null)
onMounted(() => {
        //接受传过来的书籍id
        const id = Number(route.params.id);
        bookId.value = isNaN(id) ? null : id; // 处理 NaN 情况
    }
)
const data=reactive({
    activeIndex: 0 ,// 默认选中第一个按钮
    navList : [
        { name: '首页', path: '/index' },
        { name: '排行榜', path: '/ranking' },
        { name: '分类', path: '/category' },
        { name: '36k男生', path: '/boys' },
        { name: '36k女生', path: '/girls' },
        { name: 'ip改编', path: '/ip' },
        { name: '元宇宙', path: '/metaverse' },
        { name: '免费小说', path: '/free' },
        { name: '完本小说', path: '/completed' },
        { name: 'app端', path: '/app' },
    ],

})
</script>
<style scoped>
.common-layout{
    width: 100%;
    height: 100%;
}
/*主体*/
.footer-class{
    /*padding: 0px;*/
    background-color: white;
}
.button-group-container1{
    display: flex;
    align-items: center; /* 内部元素垂直居中 */
    width: 100%;
    max-width: 1200px; /* 固定最大宽度，避免缩放时过度拉伸 */
    margin: 0 auto; /* 始终水平居中 */
    flex-direction: column;
}
</style>